{#
This file is part of EC-CUBE

Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.

http://www.ec-cube.co.jp/

For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{% extends '@admin/default_frame.twig' %}

{% set menus = ['setting', 'shop', 'shop_payment'] %}

{% block title %}{{ 'admin.setting.shop.payment_setting'|trans }}{% endblock %}
{% block sub_title %}{{ 'admin.setting.shop'|trans }}{% endblock %}

{% form_theme form '@admin/Form/bootstrap_4_horizontal_layout.html.twig' %}

{% block stylesheet %}
    <link rel="stylesheet" href="{{ asset('assets/css/fileupload/jquery.fileupload.css', 'admin') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/fileupload/jquery.fileupload-ui.css', 'admin') }}">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
{% endblock stylesheet %}

{% block javascript %}
    <script src="{{ asset('assets/js/vendor/fileupload/vendor/jquery.ui.widget.js', 'admin') }}"></script>
    <script src="{{ asset('assets/js/vendor/fileupload/jquery.iframe-transport.js', 'admin') }}"></script>
    <script src="{{ asset('assets/js/vendor/fileupload/jquery.fileupload.js', 'admin') }}"></script>
    <script src="{{ asset('assets/js/vendor/fileupload/jquery.fileupload-process.js', 'admin') }}"></script>
    <script src="{{ asset('assets/js/vendor/fileupload/jquery.fileupload-validate.js', 'admin') }}"></script>
    <script>var bootstrapTooltip = $.fn.tooltip.noConflict();</script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
        $.fn.tooltip = bootstrapTooltip;
        $(document).on('drop dragover', function(e) {
            e.preventDefault();
        });

        $(function() {
            var hideThumbnail = function() {
                if ($('#thumb div').length > 0) {
                    $('#icon_no_image').css('display', 'none');
                } else {
                    $('#icon_no_image').css('display', '');
                }
            };

            var proto_img = '<div class="c-form__fileUploadThumbnail" style="background-image:url(\'__path__\');">' +
                '<a class="delete-image"><i class="fa fa-times" aria-hidden="true"></i></a>' +
                '</div>';
            var payment_image = $('#{{ form.payment_image.vars.id }}').val();
            if (payment_image != '') {
                var filename = $('#{{ form.payment_image.vars.id }}').val();
                if (payment_image == '{{ oldPaymentImage }}') {
                    var path = '{{ asset('', 'save_image') }}' + filename;
                } else {
                    var path = '{{ asset('', 'temp_image') }}' + filename;
                }
                var $img = $(proto_img.replace(/__path__/g, path));
                $('#{{ form.payment_image.vars.id }}').val(filename);

                $('#thumb').append($img);
                hideThumbnail();
            }
            hideThumbnail();

            $('#{{ form.payment_image_file.vars.id }}').fileupload({
                url: "{{ url('admin_payment_image_add') }}",
                type: 'post',
                dataType: 'json',
                dropZone: $('#upload-zone'),
                done: function(e, data) {
                    $('.progress').hide();
                    var path = '{{ asset('', 'temp_image') }}/' + data.result.filename;
                    var $img = $(proto_img.replace(/__path__/g, path));
                    $('#{{ form.payment_image.vars.id }}').val(data.result.filename);

                    $('#thumb').append($img);
                    hideThumbnail();
                },
                fail: function(e, data) {
                    alert('{{ 'admin.common.upload_error'|trans }}');
                },
                always: function(e, data) {
                    $('.progress').hide();
                    $('.progress .progress-bar').width('0%');
                },
                start: function(e, data) {
                    if ($('.c-form__fileUploadThumbnail').length >= 1) {
                        $.each($('.delete-image'), function(index, delete_image) {
                            delete_image.click();
                        });
                    }
                    $('.progress').show();
                    $('#thumb').find('div').remove();
                    $('#{{ form.payment_image.vars.id }}').val('');
                },
                acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
                maxFileSize: 10000000,
                maxNumberOfFiles: 1,
                progressall: function(e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $('.progress .progress-bar').css(
                        'width',
                        progress + '%'
                    );
                },
                processalways: function(e, data) {
                    if (data.files.error) {
                        alert("{{ 'admin.common.upload_error'|trans }}");
                    }
                }
            });

            $('#thumb').on('click', '.delete-image', function() {
                $('#{{ form.payment_image.vars.id }}').val('');
                var thumbnail = $(this).parents('div.c-form__fileUploadThumbnail');
                $(thumbnail).remove();
                hideThumbnail();
            });

            // 画像アップロード
            $('#file_upload').on('click', function() {
                $('#{{ form.payment_image_file.vars.id }}').click();
            });
        });
    </script>
{% endblock %}

{% block main %}
    <form role="form" class="form-horizontal" name="form1" id="form1" method="post" action="" enctype="multipart/form-data">
        {{ form_widget(form._token) }}
        {{ form_widget(form.fixed) }}
        <div class="c-contentsArea__cols">
            <div class="c-contentsArea__primaryCol">
                <div class="c-primaryCol">
                    <div class="card rounded border-0 mb-4">
                        <div class="card-header"><span>{{ 'admin.common.payment_method'|trans }}</span></div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-3"><span>{{ 'admin.setting.shop.payment.payment_name'|trans }}</span></div>
                                <div class="col mb-2">
                                    {{ form_widget(form.method) }}
                                    {{ form_errors(form.method) }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-3"><span>{{ 'admin.common.charge'|trans }}</span></div>
                                <div class="col mb-2">
                                    {{ form_widget(form.charge) }}
                                    {{ form_errors(form.charge) }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-3"><span>{{ 'admin.setting.shop.payment.terms_of_use'|trans }}</span></div>
                                <div class="col mb-2">
                                    <div class="row justify-content-start">
                                        <div class="col-4">
                                            {{ form_widget(form.rule_min) }}
                                            {{ form_errors(form.rule_min) }}
                                        </div>
                                        <div class="col-auto text-center p-0"><span class="align-middle">{{ 'admin.common.separator__range'|trans }}</span></div>
                                        <div class="col-4">
                                            {{ form_widget(form.rule_max) }}
                                            {{ form_errors(form.rule_max) }}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-3">
                                    <div class="d-inline-block" data-tooltip="true" data-placement="top" title="{{ 'tooltip.setting.shop.payment.logo_image'|trans }}">
                                        <span>{{ 'admin.setting.shop.payment.logo_image'|trans }}</span><i class="fa fa-question-circle fa-lg ml-1"></i>
                                        <br>{{ 'admin.setting.shop.payment.logo_image_size'|trans }}
                                    </div>
                                </div>
                                <div class="col mb-2">
                                    <div class="progress" style="display: none;">
                                        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                    <div id="thumb" class="c-form__fileUploadThumbnails clearfix"></div>
                                    {{ form_widget(form.payment_image, { attr : { style : 'display:none;' } }) }}
                                    <div id="upload-zone" class="media py-5 border-ec-dashed mb-2 rounded">
                                        <div class="media-body">
                                            <i class="fa fa-cloud-upload fa-3x text-ec-lightGray mx-3 align-middle" aria-hidden="true"></i>
                                            {{ 'admin.common.drag_and_drop_image_description'|trans }}
                                            {{ form_widget(form.payment_image_file, { attr : { accept : 'image/*', style : 'display:none;' } }) }}
                                            {{ form_errors(form.payment_image) }}
                                            <a class="btn btn-ec-regular mr-2" onclick="$('#payment_register_payment_image_file').click()">
                                                {{ 'admin.common.file_select'|trans }}
                                            </a>
                                        </div><!-- /.media-body -->
                                    </div><!-- /.media -->
                                </div>
                            </div>
                            {# エンティティ拡張の自動出力 #}
                            {% for f in form if f.vars.eccube_form_options.auto_render %}
                                {% if f.vars.eccube_form_options.form_theme %}
                                    {% form_theme f f.vars.eccube_form_options.form_theme %}
                                    {{ form_row(f) }}
                                {% else %}
                                    <div class="row">
                                        <div class="col-3"><span>{{ f.vars.label|trans }}</span></div>
                                        <div class="col mb-2">
                                            {{ form_widget(f) }}
                                            {{ form_errors(f) }}
                                        </div>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        </div><!-- /.box-body -->
                    </div>
                </div>
            </div><!-- /.box -->
        </div><!-- /.col -->
        <div class="c-conversionArea">
            <div class="c-conversionArea__container">
                <div class="row justify-content-between align-items-center">
                    <div class="col-6">
                        <div class="c-conversionArea__leftBlockItem">
                            <a class="c-baseLink" href="{{ url('admin_setting_shop_payment') }}">
                                <i class="fa fa-backward" aria-hidden="true"></i><span>{{ 'admin.setting.shop.payment_list'|trans }}</span>
                            </a>
                        </div>
                    </div>
                    <div class="col-6">
                        <div id="ex-conversion-action" class="row align-items-center justify-content-end">
                            <div class="col-auto">
                                {{ form_widget(form.visible) }}
                                {{ form_errors(form.visible) }}
                            </div>
                            <div class="col-auto">
                                <button class="btn btn-ec-conversion px-5" type="submit">{{ 'admin.common.registration'|trans }}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
{% endblock %}
